import React, { Component } from 'react'
import { Button,Calendar,Picker} from 'antd-mobile'
import {formatDate} from '@/assets/js/methods'

import './Appointment.scss'
import "../order/OrderProgress.scss"

const now = new Date();

class Appointment extends Component {
	originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
	constructor() {
		super()
		this.state = {
			radio1:true,
			radio2:false,
			show: false,
			startTime:undefined,
      endTime: undefined,
			config: {
				type: 'one'
			},
		}
	}
	onSelectHasDisableDate = (dates) => {
		console.warn('onSelectHasDisableDate', dates);
	}
	pickerChange(value) {}
  onConfirm = (startTime) => {
    console.log(startTime.getTime())
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime: formatDate(startTime.getTime())
    });
  }

  onCancel = () => {
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime: undefined,
      endTime: undefined,
    });
  }
	componentDidMount() {
		document.getElementsByTagName('title')[0].innerHTML = '人员管理'
		this.setState({
			startTime: formatDate(new Date().getTime())
		})
	}
	render() {
		const height=window.screen.availHeight
		const district = [
			{
				label: '全部订单',
				value: '1',
			},
			{
				label: '安装订单',
				value: '2',
      },
      {
				label: '维护订单',
				value: '3',
			}
		]
		return (
			<div className='appointment' style={{ minHeight: height + 'px' }}>
			<div className='contentbox'>
				<div className='content'>
					<div className='leftcontent'>姓名</div>
					<div className='rightcontent'>
					占奇栋  
					<div className='radiocirle' 
						onClick={()=>{
							this.setState({
								radio1:true,
								radio2:false
							})
						}}>
					{this.state.radio1?
						<img src={require('../../images/dui.png')}/>
						:<img src={require('../../images/unfouced.png')}/>
					}
					</div>先生
					
					<div className='radiocirle'
						onClick={()=>{
							this.setState({
								radio1:false,
								radio2:true
							})
						}}>
					{this.state.radio2?
						<img src={require('../../images/dui.png')}/>
						:<img src={require('../../images/unfouced.png')}/>
					}
					</div>女士 
					</div>
				</div>

				<div className='content'>
					<div className='leftcontent'>手机号码</div>
					<div className='rightcontent'>
					<input
						type="text"
						placeholder='输入手机号码'
						style={{ width: '100%', backgroundColor: 'transparent', border: 0, color: '#999' }} />
					</div>
				</div>

				<div className='content'>
					<div className='leftcontent'>安装地址</div>
					<div className='rightcontent'>
					<input
						type="text"
						placeholder='详细填写门牌号'
						style={{ width: '100%', backgroundColor: 'transparent', border: 0, color: '#999' }} />
					</div>
				</div>

				<div className='content'>
					<div className='leftcontent'>隶属门店</div>
					<div className='rightcontent'>
					<Picker data={district}
                        cols={1}
                        className="forss"
                        onChange={this.pickerChange.bind(this)}><span className="picker-item">北京门店1</span></Picker>
						<img className='more' src={require('../../images/arrow_icon.png')} alt=''/>
					</div>
				</div>

				<div className='content'>
					<div className='leftcontent'>员工类型</div>
					<div className='rightcontent'>
					<Picker data={district}
                        cols={1}
                        className="forss"
                        onChange={this.pickerChange.bind(this)}><span className="picker-item">销售</span></Picker>
						<img className='more' src={require('../../images/arrow_icon.png')} alt=''/>
					</div>
				</div>

				<div className='content'>
					<div className='leftcontent'>预约时间</div>
					<div 
					className='rightcontent'
					onClick={() => {
						document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
						this.setState({
							show: true
						});
					}}>
					{this.state.startTime?this.state.startTime:'选择日期'}
					</div>
				</div>

				<div className='content'>
					<div className='leftcontent'>备注信息</div>
					<div className='rightcontent'>
					<input
						type="text"
						placeholder=' '
						style={{width:'100%',backgroundColor: 'transparent', border: 0, color: '#999' }} />
					</div>
				</div>
			</div>
				<Button className='but_1' 
				onClick={()=>{
					this.props.history.push({
					})
				}}>创建信息</Button>
				<Calendar
				{...this.state.config}
				visible={this.state.show}
				onCancel={this.onCancel}
				onConfirm={this.onConfirm}
				onSelectHasDisableDate={this.onSelectHasDisableDate}
				getDateExtra={this.getDateExtra}
				defaultDate={now}
				minDate={new Date(+now - 5184000000)}
				maxDate={new Date(+now + 31536000000)}
			/>
			</div>
		);
	}
}

export default Appointment;